<template>
  <div class="v-editor-models-right-dropdown g-jc-sb">
    <PropertyNodeLabel
      class="_list_scroll"
      :row="row"
      :selected="selected"
      :selectedModelId="selectedModelId"
      @clickItem="handleClickItem"
    />
    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="border-left: 1px solid #ddd; line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <div>
        <MDropdown
          class="g-inline-block"
          lazy
          :loadListCallback="loadOptions"
        >
          <div>
            <img
              src="statics/icons/app/iconadd.png"
              class="g-pointer"
              @click="handleClick"
            />
          </div>
          <template #dropdown>
            <MDropdownMenuItem
              v-for="(item, index) in addModelItems"
              :key="index"
              @click="handleClickOption(item)"
            >
              <img
                :src="item.icon"
                style="width: 16px; height: 16px"
              />
              <span class="g-pd-lr-8">{{ locale.getTByContent(item, item.label, { en: "enLabel", zhCn: "label" }) }}</span>
            </MDropdownMenuItem>
          </template>
        </MDropdown>
      </div>
      <div class="g-m-t-4">
        <img
          src="statics/icons/app/iconreduce.png"
          class="g-pointer"
          :class="{ _disable: valueData.length == 0 }"
          @click="handleRemove"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow, ModelValue, AddModelItem } from "../../types";
import { ref, Ref, computed, watch, inject } from "vue";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { propertyUtil } from "../../PropertyUtil";
import { locale } from "@/util/locale";
import PropertyNodeLabel from "../custom/PropertyNodeLabel.vue";
import { modelService } from "@/modules/model/service";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 右侧有个下拉菜单，选择模型类型，多选插入
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();
const addModelItems = ref<AddModelItem[]>([]);
const valueData = computed(() => {
  return (props.row.value || []) as ModelValue[];
});

const selectedModelId = ref("");

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);

function handleRemove() {
  if (selectedModelId.value) {
    propertyUtil.deletePropertyAndRefresh(props.row, selectedModelId.value);
    selectedModelId.value = "";
  }
}

function handleClickItem(item: { id: string }) {
  selectedModelId.value = item.id;
}

function handleClickOption(option: AddModelItem) {
  propertyUtil.addPropertyValueAndRefresh(props.row, option.metaClass as string, option.applyStereotypes);
}
const clientY = ref(0);
const handleClick = (target: MouseEvent) => {
  clientY.value = target.clientY;
};
let loading = false;
let loaded = false;
async function loadOptions() {
  console.log("AAAAA");
  const projectId = app.activeProject?.id;
  const modelId = props.row.modelId;
  const modelIds = props.row.modelIds;
  if (!projectId || (!modelId && !modelIds) || loaded || loading) return;

  loading = true;
  try {
    addModelItems.value = await modelService.getPropertyAddModelItems(projectId, modelId, modelIds, props.row.key);
    loaded = true;
  } finally {
    loading = false;
  }
}
</script>
<style lang="scss">
.v-editor-models-right-dropdown {
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
  ._disable {
    cursor: not-allowed;
    color: #c1c5cb;
    filter: grayscale(100);
  }
}
</style>
